<template>
  <div class="aa-container" style="padding-top: 20px;">
    <!-- <div class="flex-row" v-for="(item, index) in samplelist" :key="index">
      <div class="material-textfield green flex-all"  style="margin-right: 10px;" :class="{'validate-err': errors.has('samplelist_name_' + index)}">
        <input type="text" required v-model="item.name" v-validate="'required|max:40'" :data-vv-name="'samplelist_name_' + index">
        <label data-content="名称*">名称*</label>
      </div>
      <div class="material-textfield green flex-all"  style="margin-right: 10px;" :class="{'validate-err': errors.has('samplelist_count_' + index)}" >
        <input type="text" required v-model="item.count" v-validate="'required|posiInt|max:4'" :data-vv-name="'samplelist_count_' + index"/>
        <label data-content="数量（本，份，张，幅）*">数量（本，份，张，幅）*</label>
      </div>
      <i class="el-icon-delete delete-info" @click="deleteItem(item, index)" v-show="samplelist.length > 1"></i>
    </div>
    <div class="add-info" @click="addItem()">
      <i class="el-icon-plus"></i>
      <span>添加</span>
    </div> -->
    <p><i class="el-icon-info" style="color: #c05a5a;"></i>&nbsp;&nbsp;附件仅支持PDF格式上传，50M以内，每个类目附件个数10个以内；</p>
    <!-- 上传附件 -->
    <div class="flex-row vip-upload" style="margin-top: 8px;" :class="{'validate-err': errors.has('files' + index)}"  v-for="(item, index) in samplelist" :key="index">
      <label data-content="上传附件" style="width: 400px; text-align: right;" class="ewai" >{{item.name}}{{item.isNeed ? '*(必传)' : '(可选)'}}</label>
      <file-upload
        ref="upload"
        v-model="item.path"
        v-validate="item.isNeed ? 'required|fileupload' : 'nova'"
        :data-vv-name="'files' + index"
        :accept="item.accept"
        :multiple="true"
        :limit="item.limit"
        :max-size="item.maxSize"
      >
        <el-button slot="trigger" class="width-200">选取文件</el-button>
        <span slot="tip" class="el-upload__tip d-block" v-if="item.prompt.length > 1">
          <i class="el-icon-info" style="color: #c05a5a;"></i>
          {{item.prompt}}
        </span>
        <div :class="{'validate-err': errors.has('count' + index)}" class="d-inline" v-if="!(index === 12)" @click.stop="">
          <el-input-number
            v-model="item.count" 
            :min="0" :max="item.limit" 
            label="文件统计" 
            v-validate="(item.isNeed || item.path.length > 0) ? 'min_value:1|max_value:' + item.limit  : 'nova'"
            :data-vv-name="'count' + index"
          ></el-input-number>&nbsp;&nbsp;&nbsp;<p class="text-muted d-inline">(本、份、张、幅)</p>
        </div>
          
      </file-upload>
    </div>
    
  </div>
</template>

<script>
  export default {
    title: '样品附件清单',
    name: 'sample-list',
    data () {
      return {
        samplelist: [],
        defaultArr: [
          {name: '1.工程项目承担单位资质证书复印', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '2.工程项目任务书或合同书复印件', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '3.创优计划/创优工程项目工作报告', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '4.技术设计书/作业指导书', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '5.技术总结', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '6.检查报告', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '7.业主方或工程项目成果管理单位验收报告', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '8.质检机构检验报告', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '9.地图审查证明/测试报告', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '10.外业测量仪器计量检定证书复印件', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '11.用户意见', count: 0, path: '', isNeed: false, 
            accept: 'pdf', limit: 10, maxSize: 50, prompt: ''},
          {name: '12.工程项目成果样品', count: 0, path: '', isNeed: false, 
            accept: 'image/*, .pdf, .jpg, .png, .jpeg', limit: 20, maxSize: 50, 
            prompt: '说明：成果附件支持PDF、JPG、PNG格式上传，附件个数20以内'},
          {name: '工程项目奖加盖企业公章的电子扫面件', count: 1, path: '', isNeed: true, 
            accept: 'image/*, .pdf, .jpg, .png, .jpeg', limit: 5, maxSize: 50, prompt: '本附件为申请表加盖公章后的扫描件'}
        ],
      }
    },
    props: {
      data: {}
    },
    mounted () {
      setTimeout(() => {
        if (this.data.length > 0) {
          this.setData(this.data)
        } else {
          this.samplelist = [...this.defaultArr]
        }
      }, 100)
    },

    methods: {
      // 重新组织数据
      setData (data) {
        let arr = data.sort((item1, item2) => {
          if (isNaN(parseInt(item2.name))) {
            return -1
          }
          if (isNaN(parseInt(item1.name))) {
            return 1
          }
          return parseInt(item1.name) - parseInt(item2.name)
        })
        this.samplelist  = arr.map(item => {
          return this.addAncillary(item)
        })
      },
      addAncillary (item) {
        let index = parseInt(item.name)
        let obj = {}
        if (index === 12) {
            obj = {
              isNeed: false,
              accept: 'image/*, .pdf, .jpg, .png, .jpeg', 
              limit: 20, 
              maxSize: 50, 
              prompt: '文件格式为pdf或图片类型，附件个数不超过20个'
            } 
          } else if ([3, 4, 9].includes(index)) {
            obj = {
              isNeed: false,
              accept: '.pdf', 
              limit: 10, 
              maxSize: 50, 
              prompt: ''
            } 
          } else if (isNaN(index)) {
            obj = {
              isNeed: true,
              accept: 'image/*, .pdf, .jpg, .png, .jpeg', 
              limit: 5, 
              maxSize: 50, 
              prompt: '本附件为申请表加盖公章后的扫描件'
            }
          } else {
            obj = {
              isNeed: false,
              accept: '.pdf', 
              limit: 10, 
              maxSize: 50, 
              prompt: '',
            } 
          }
          return Object.assign(item, obj)
      },
      validate () {
        return this.$validator.validateAll()
      },
    },
    watch: {
      'samplelist': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.samplelist)
        },
        deep: true
      }
    }
  }
</script>
